<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@page import="BookDB.BookBean"%>
 <%@page import="BookReturn.BookRecordBean"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
 <script type="text/javascript">
 
 
 function draw(area) {
	  var ctx = document.getElementById('myCanvas').getContext('2d');
	  var img = new Image();
	  img.src = 'imageSource/map.gif';
	
	  var x=0,y=0;
	if (area=="A")
		{x=160;y=160;}
	else if (area=="B")
		{x=300; y=160;}
	else if (area=="C")
		{x=120; y=260;}
	else if (area=="D")
		{x=300; y=240;}

	  	  
	  img.onload = function(){
	    ctx.drawImage(img,0,0);	   
	  	 ctx.strokeStyle = 'red';
	  	 ctx.beginPath();
	  	  ctx.fillStyle = "#ff0000";  
        ctx.arc(x,y,10,0,Math.PI*2,true);
         
          ctx.stroke();
        
          ctx.fillText('你要找的書在這裡', x+20, y-5); 
       //   ctx.fillRect(x, y, 10, 10);
          
	  }
	  }
	
	 
	    </script>
	  
 
<style>

.mainTableTitle 
{

font-size:14px; 
background: #C6C;
margin-top: 1px;
margin-right:1px;
margin-bottom: 1px;
margin-left: 1px;
padding:1;
text-align:center;
height:18px;
width:100%;
color:#FFF;
height:16px;
}

.mainTablecross
{
background:#E7E7E7; 
margin:0;
padding:0;
text-align:center;
width:100%; 
font-size:13px;
color:#000; 
text-height:12px;
font-family: "Times New Roman", Serif;
}

.mainTableTitle td
{
width:auto;
height:36px;
algin:center;
}

.mainTablecross td
{
width:auto;
height:36px;
algin:center;
}

</style>

<jsp:useBean id="blist" scope="request" type="java.util.List"></jsp:useBean>
<jsp:useBean id="c" class="BookCreated.BookCalnumsBean" scope="request"></jsp:useBean>
<jsp:useBean id="b" class="BookDB.BookBean" scope="request"></jsp:useBean>
</head>
<body background="imageSource/05.gif" >



<font color="#882211" size="5">書藉資料查詢系統</font>

<Form action="BasicSearch" method="get">
請輸入書名(只須輸入關鍵詞): <input type="text" name="keyword"/>
<input type="submit" value="搜尋">
</Form>
<p>
<p>
<p>
<font color="##529A65" size="4" >多條件搜索</font><p>
<Form action="AdvancedSearch" method="get">


<table>
<tr><td>
館藏編號</td><td>
<input type="text" name="bookid" SIZE=1 style="width: 150px;"></td></tr>
	<tr><td>
ISBN編號</td><td>
<input type="text" name="isbn" SIZE=1 style="width: 150px;"></td></tr>

<tr><td>
書藉名稱</td><td>
<input type="text" name="bookname" SIZE=1 style="width: 150px;"></td></tr>

<tr><td>
<label>書藉分類</label></td>
<td>
<select name="calid" SIZE=1 style="width: 150px;">
			<OPTION value="">
				全部分類
				<%=c.GenCalnumsSelect("")%>
		</select></td></tr>
		
<tr><td>
在架書藉</td>
<td>
<select name="borrowing" SIZE=1 style="width: 150px;" >
<option value="">全部
</option>
<option value="false">在架
</option>
<option value="true">不在架
</option>
</select></td></tr>
<tr><td>館藏區域</td><td><select name="location" SIZE=1 style="width: 150px;" >
<option value=""> 全部分類</option>
<%=b.getAreatypeHTML()%>
</select>

<td><input type="submit" value="進階搜尋"></td></tr>		

</table>
<p>
</Form>
<p>
<p>

<font color="#529A65" size="4">搜索結果</font><p>
  <table border="1" > 
      <tr class="mainTableTitle"> 
      <td ><b>館藏編號</b></td>
       <td ><b>ISBN編號</b></td>
       <td ><b>書藉名稱 </b></td>
        <td><b>書藉分類</b></td>
       <td ><b>在架(是/否)</b></td>
         <td ><b>館藏位置</b></td>
       </tr>      

<%for (int i=0;i<blist.size();i++){
	BookBean bb=(BookBean)blist.get(i);
%>
	<tr class="mainTablecross">
	<td><%=bb.getBookid() %></td>
	<td> <%=bb.getIsbn()%> </td>
	<td> <%=bb.getBookname()%> </td>
	<td> <%=bb.getCalDesp()%></td>
	<td> <%if (bb.isStatus()==true) {%>否<%}else {%>是<%}%> </td>
	<td><a id="area" onclick="draw('<%=bb.getLocation()%>');$('#myCanvas').show();$('#tit').show();"  style="text-decoration:underline;cursor:pointer;color:#00f"><%=bb.getLocation()%></a></td>	
	</tr>
	<%}%>
      
</table>
<p>

<label id="tit" style="display:none">藏書位置圖</label><p>
<Canvas id="myCanvas" width="600" height="700" style="display:none">
你的瀏覽不支援此功能,請改用HTML5支援之瀏覽器
</canvas><p>
<a href="mainform.html" >返回主頁</a>
</body>
</html>